window.addEventListener("load", async () => {
    try {
        const res = await axios({
            url: "/dashboard",
            // 在请求头信息中注入token headers中的数据会被放在请求头信息中
            // headers:{
            //     Authorization:localStorage.getItem('token'),
            // }
        });
        // 显示预览区域的数据
        const data = res.data.overview;
        for (const k in data) {
            document.querySelector(`[name=${k}]`).innerHTML = data[k];
        }
        console.log(res.data);
        const { year, groupData, salaryData, provinceData } = res.data;
        // 薪资走势
        function salaryEcharts(year) {
            // 基于准备好的dom，初始化echarts实例
            const myChart = echarts.init(document.querySelector("#line"));
            const option = {
                title: {
                    text: "2022全学科薪资走势",
                    left: "1%",
                    top: "3%",
                },
                xAxis: {
                    type: "category",
                    data: year.map((i) => i.month),
                    axisLine: {
                        lineStyle: {
                            color: "#ccc",
                            type: "dashed",
                        },
                    },
                    axisLabel: {
                        color: "#999",
                    },
                },
                yAxis: {
                    type: "value",
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "#ccc",
                        },
                    },
                    axisLabel: {
                        color: "#999",
                    },
                },
                tooltip: {
                    trigger: "axis",
                },
                grid: {
                    left: "10%",
                    top: "15%",
                    right: "5%",
                    bottom: "15%",
                },
                series: [
                    {
                        data: year.map((i) => i.salary),
                        type: "line",
                        smooth: true,
                        symbolSize: "8",
                        lineStyle: {
                            width: "5",
                        },
                        areaStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "#499fee", // 0% 处的颜色
                                    },
                                    {
                                        offset: 0.8,
                                        color: "#fff", // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                        },
                    },
                ],

                color: ["#499fee"],
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        salaryEcharts(year);

        // 薪资分布
        function salaryAll(salaryData) {
            // 基于准备好的dom，初始化echarts实例
            const myChart = echarts.init(document.querySelector("#salary"));

            const option = {
                title: {
                    text: "班级薪资分布",
                    top: "3%",
                    left: "2%",
                },
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    bottom: "5%",
                    left: "center",
                },
                series: [
                    {
                        name: "班级薪资分布",
                        type: "pie",
                        radius: ["40%", "55%"],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 15,
                            borderColor: "#fff",
                            borderWidth: 3,
                        },
                        label: {
                            show: false,
                            position: "center",
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 20,
                                fontWeight: "bold",
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        data: salaryData.map((item) => {
                            return {
                                value: item.b_count + item.g_count,
                                name: item.label,
                            };
                        }),
                    },
                ],
                color: ["#fda224", "#5097ff", "#3fceff", "#34d39a"],
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        salaryAll(salaryData);

        // 小组薪资
        function groupEcharts(groupData) {
            // 基于准备好的dom，初始化echarts实例
            const myChart = echarts.init(document.querySelector("#lines"));
            const option = {
                xAxis: {
                    type: "category",
                    data: groupData[1].map((i) => i.name),
                    axisLine: {
                        lineStyle: {
                            color: "#ccc",
                            type: "dashed",
                        },
                    },
                    axisLabel: {
                        color: "#999",
                    },
                },
                yAxis: {
                    type: "value",
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "#ccc",
                        },
                    },
                    axisLabel: {
                        color: "#999",
                    },
                },
                series: [
                    {
                        data: groupData[1].map((i) => i.hope_salary),
                        type: "bar",
                    },
                    {
                        data: groupData[1].map((i) => i.salary),
                        type: "bar",
                    },
                ],
                tooltip: {
                    trigger: "axis",
                },
                color: [
                    {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "#38d39c", // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "#d3f3e8", // 100% 处的颜色
                            },
                        ],
                        global: false, // 缺省为 false
                    },
                    {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "#50a2ee", // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "#d4e8fb", // 100% 处的颜色
                            },
                        ],
                        global: false, // 缺省为 false
                    },
                ],
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            const btns = document.querySelectorAll("#btns button");
            btns.forEach((dom) => {
                dom.addEventListener("click", function () {
                    // 排他
                    document
                        .querySelector("#btns .btn-blue")
                        .classList.remove("btn-blue");
                    this.classList.add("btn-blue");
                    // 这个索引就代表了当前点击了哪个组
                    const index = this.innerHTML.trim();
                    option.xAxis.data = groupData[index].map((i) => i.name);
                    option.series[0].data = groupData[index].map(
                        (i) => i.hope_salary
                    );
                    option.series[1].data = groupData[index].map(
                        (i) => i.salary
                    );
                    myChart.setOption(option);
                });
            });
        }
        groupEcharts(groupData);

        // 男女薪资分布
        function salaryGender(salaryData) {
            // 基于准备好的dom，初始化echarts实例
            const myChart = echarts.init(document.querySelector("#gender"));

            const option = {
                title: [
                    {
                        text: "男女薪资分布",
                        top: "2%",
                        left: "2%",
                    },
                    {
                        subtext: "男生",
                        subtextStyle: {
                            fontWeight: "700",
                        },
                        left: "center",
                        top: "45%",
                    },
                    {
                        subtext: "女生",
                        subtextStyle: {
                            fontWeight: "700",
                        },
                        left: "center",
                        top: "90%",
                    },
                ],
                tooltip: {
                    trigger: "item",
                },
                series: [
                    {
                        name: "男生",
                        type: "pie",
                        radius: ["40%", "60%"],
                        data: salaryData.map((item) => {
                            return {
                                name: item.label,
                                value: item.b_count,
                            };
                        }),
                        label: {
                            position: "outer",
                            alignTo: "none",
                            bleedMargin: 5,
                        },
                        bottom: "45%",
                    },
                    {
                        name: "女生",
                        type: "pie",
                        radius: ["40%", "60%"],
                        data: salaryData.map((item) => {
                            return {
                                name: item.label,
                                value: item.g_count,
                            };
                        }),
                        label: {
                            position: "outer",
                            alignTo: "labelLine",
                            bleedMargin: 5,
                        },
                        top: "45%",
                    },
                ],
                color: ["#fda224", "#5097ff", "#3fceff", "#34d39a"],
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        salaryGender(salaryData);

        // 籍贯分布
        const initMapChart = (provinceData) => {
            const myEchart = echarts.init(document.querySelector("#map"));
            const dataList = [
                { name: "南海诸岛", value: 0 },
                { name: "北京", value: 0 },
                { name: "天津", value: 0 },
                { name: "上海", value: 0 },
                { name: "重庆", value: 0 },
                { name: "河北", value: 0 },
                { name: "河南", value: 0 },
                { name: "云南", value: 0 },
                { name: "辽宁", value: 0 },
                { name: "黑龙江", value: 0 },
                { name: "湖南", value: 0 },
                { name: "安徽", value: 0 },
                { name: "山东", value: 0 },
                { name: "新疆", value: 0 },
                { name: "江苏", value: 0 },
                { name: "浙江", value: 0 },
                { name: "江西", value: 0 },
                { name: "湖北", value: 0 },
                { name: "广西", value: 0 },
                { name: "甘肃", value: 0 },
                { name: "山西", value: 0 },
                { name: "内蒙古", value: 0 },
                { name: "陕西", value: 0 },
                { name: "吉林", value: 0 },
                { name: "福建", value: 0 },
                { name: "贵州", value: 0 },
                { name: "广东", value: 0 },
                { name: "青海", value: 0 },
                { name: "西藏", value: 0 },
                { name: "四川", value: 0 },
                { name: "宁夏", value: 0 },
                { name: "海南", value: 0 },
                { name: "台湾", value: 0 },
                { name: "香港", value: 0 },
                { name: "澳门", value: 0 },
            ];
            provinceData.forEach((item) => {
                dataList.find((v) => {
                    if (item.name.indexOf(v.name) !== -1) {
                        v.value = item.value;
                    }
                });
            });
            let option = {
                title: {
                    text: "籍贯分布",
                    top: 10,
                    left: 10,
                    textStyle: {
                        fontSize: 16,
                    },
                },
                tooltip: {
                    trigger: "item",
                    formatter: "{b}: {c} 位学员",
                    borderColor: "transparent",
                    backgroundColor: "rgba(0,0,0,0.5)",
                    textStyle: {
                        color: "#fff",
                    },
                },
                visualMap: {
                    min: 0,
                    max: 6,
                    left: "left",
                    bottom: "20",
                    text: ["6", "0"],
                    inRange: {
                        color: ["#ffffff", "#0075F0"],
                    },
                    show: true,
                    left: 40,
                },
                geo: {
                    map: "china",
                    roam: false,
                    zoom: 1.0,
                    label: {
                        normal: {
                            show: true,
                            fontSize: "10",
                            color: "rgba(0,0,0,0.7)",
                        },
                    },
                    itemStyle: {
                        normal: {
                            borderColor: "rgba(0, 0, 0, 0.2)",
                            color: "#e0ffff",
                        },
                        emphasis: {
                            areaColor: "#34D39A",
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowBlur: 20,
                            borderWidth: 0,
                            shadowColor: "rgba(0, 0, 0, 0.5)",
                        },
                    },
                },
                series: [
                    {
                        name: "籍贯分布",
                        type: "map",
                        geoIndex: 0,
                        data: dataList,
                    },
                ],
            };
            myEchart.setOption(option);
        };
        initMapChart(provinceData);
    } catch (err) {
        console.log(err);
    }
});
